<template>
  <div id="personal_curriculum">
    <div class="info_title">
      <div style="float:left;">我的课程</div>
      <div class="classRoom" @click="gotoTest"></div>
    </div>
    <div class="line"></div>

    <div class="curriculum_info">
      <div
        v-if="studentImmediatelyCourse.showTime"
        class="starting_title"
        style="margin-bottom: 0.2rem;"
      >{{studentImmediatelyCourse.showTime == 'classBegin'?"正在上课":"即将开课"}}</div>
      <div v-if="studentImmediatelyCourse.showTime" class="starting_info">
        <div class="starting_curriculum">
          <div class="info_name">
            <div class="info_img" :style="{background:studentImmediatelyCourse.photo}">
              <div class="info_img_tag" v-if="studentImmediatelyCourse.classOrTrialClass == 2">试听课</div>
            </div>
            <div class="curriculum_info">
              <div
                class="curriculum_info_title"
                v-if="studentImmediatelyCourse.classSyllabusName != null"
              >{{studentImmediatelyCourse.classSyllabusName}}</div>
              <div class="curriculum_info_title" v-else>第{{studentImmediatelyCourse.studentUseHour == null ?'0':studentImmediatelyCourse.studentUseHour}}/{{studentImmediatelyCourse.studentBuyHour}}课</div>
              <div class="curriculum_info_content">{{studentImmediatelyCourse.courseName}}</div>
              <div class="curriculum_info_content">{{studentImmediatelyCourse.teacherUserName}}</div>
              <div class="curriculum_info_footer">上课时间：{{studentImmediatelyCourse.startTime}}</div>
            </div>
          </div>
          <div class="info_time">
            <div v-if="studentImmediatelyCourse.showTime != 'classBegin'">
              <div class="info_time_title">距上课还差</div>
              <div class="info_time_starting">{{studentImmediatelyCourse.countDown}}</div>
            </div>
            <div v-else class="info_time_classBegin"></div>
            <div
              class="info_time_footer"
              v-if="studentImmediatelyCourse.showTime == 'classNoBegin'"
            >等待学习</div>
            <div
              class="info_time_footer_active"
              v-if="studentImmediatelyCourse.showTime == 'classWillBegin'"
              @click="gotoClass(studentImmediatelyCourse)"
            >即将开始</div>
            <div
              class="info_time_footer_active"
              v-if="studentImmediatelyCourse.showTime == 'classBegin'"
              @click="gotoClass(studentImmediatelyCourse)"
            >进入上课</div>
          </div>
        </div>
      </div>
      <div v-if="studentImmediatelyCourse.showTime" class="line1"></div>
      <div v-if="studentImmediatelyCourse.showTime" class="starting_title1">全部课程</div>
      <div v-else class="starting_title">全部课程</div>
      <div v-if="studentCourse.length == 0" class="noCurriculum">您还没有课程哟</div>
      <div v-else class="card_box">
        <div class="class_card" v-for="item in studentCourse">
          <div class="card_img" :style="{background:item.photo}">
            <div class="info_img_tag" v-if="item.classOrTrialClass == 2">试听课</div>
          </div>
          <div class="card_name">{{item.courseName}}</div>
          <div class="card_time" style="padding-top:0.08rem;">{{item.startTime}} - {{item.endTime}}</div>
          <div class="card_time" style="padding-top:0.10rem;">第{{item.studentUseHour == null ?'0':item.studentUseHour}}/{{item.studentBuyHour}}课</div>
          <div class="card_time" style="padding-top:0.10rem;">{{item.teacherUserName}}</div>
          <div class="card_btn" @click="gotoDetails(item)">{{item.classId == null ? "等待排课":"进入学习"}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
export default {
  data: function() {
    return {
      studentCourse: [],
      studentImmediatelyCourse: {}
    };
  },
  components: {},
  methods: {
    gotoTest() {
      // window.open(
      //   "http://global.talk-cloud.net/496538168/100092/0/2",
      //   "_blank"
      // );
      router.push({
        path: "/personal_center/class_room"
      });
    },
    gotoClass(item) {
      if (item.studentUrl == null || item.studentUrl == "") {
        this.$alert("该课节暂无上课视频，请稍后再试!", "暂无视频", {
          confirmButtonText: "确定",
          type: "warning",
          center: true,
          callback: action => {}
        });
      } else {
        if (!tool.isChrome()) {
          this.$alert("小鳄鱼课堂仅支持谷歌浏览器", "小鳄鱼课堂", {
            confirmButtonText: "谷歌浏览器下载",
            type: "warning",
            center: true
          })
            .then(() => {
              window.open("https://www.google.cn/chrome/");
            })
            .catch(() => {});
        } else {
          window.open(item.studentUrl, "_blank");
        }
      }
    },
    gotoDetails(item) {
      if (item.classId != null) {
        router.push({
          name: "curriculum_details",
          query: {
            classId: tool.encode(item.classId),
            isTrialClass: item.classOrTrialClass == 2 ? true : false
          }
        });
      } else {
        tool.message({
          showClose: true,
          message: "您所报的班级正在排课，请耐心等待。",
          type: "warning"
        });
      }
    },
    init(val) {
      let paras = {};
      api.queryStudentCourse(paras).then(function(data) {
        if (data.resultCode == 2000) {
          data.list.forEach(item => {
            item.photo =
              item.photo == null || item.photo == ""
                ? "url(" +
                  require("../../assets/img/person/course_default.png") +
                  ") no-repeat center top /2.72rem 1.52rem"
                : "url(" +
                  item.photo +
                  ") no-repeat center top /2.72rem 1.52rem";
          });
          vm.studentCourse = data.list;
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "warning"
          });
        }
      });
      api.queryStudentImmediatelyCourse(paras).then(function(data) {
        if (data.resultCode == 2000) {
          if (data.info == null) return;
          data.info.photo =
            data.info.photo == null || data.info.photo == ""
              ? "url(" +
                require("../../assets/img/person/course_default.png") +
                ") no-repeat center top /2.76rem 1.6rem"
              : "url(" +
                data.info.photo +
                ") no-repeat center top /2.76rem 1.6rem";
          data.info.countDown = "";
          data.info.showTime = "classNoBegin";
          vm.studentImmediatelyCourse = data.info;
          vm.show(data.info.startTime);
        } else {
          tool.message({
            showClose: true,
            message: data.message,
            type: "warning"
          });
        }
      });
    },
    show(startTime) {
      let startTime1 = new Date();
      console.log(startTime1);
      //定义结束时间
      let endTime = new Date(startTime.replace(/-/g, "/"));
      console.log(endTime);
      //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算；
      let countDown = (endTime.getTime() - startTime1.getTime()) / 1000;
      console.log(countDown);
      //获取天数 1天 = 24小时  1小时= 60分 1分 = 60秒
      let oDay = parseInt(countDown / (24 * 60 * 60));

      //获取小时数
      //特别留意 %24 这是因为需要剔除掉整的天数;
      let oHours = parseInt((countDown / (60 * 60)) % 24);

      //获取分钟数
      //同理剔除掉分钟数
      let oMinutes = parseInt((countDown / 60) % 60);
      if (oDay == 0) {
        vm.studentImmediatelyCourse.countDown =
          countDown <= 60 ? "00小时00分" : oHours + "小时" + oMinutes + "分";
      } else {
        vm.studentImmediatelyCourse.countDown = oDay + "天";
      }
      //还剩小于1分钟 开始上课
      if (countDown <= 60) {
        vm.studentImmediatelyCourse.showTime = "classBegin";
        return;
      }
      //还剩20分钟 即将开始上课
      if (countDown <= 1200) {
        vm.studentImmediatelyCourse.showTime = "classWillBegin";
      }
      setTimeout(function() {
        vm.show(startTime);
      }, 60000);
    }
  },
  created: function() {
    vm = this;
    vm.init();
  }
};
</script>

<style lang="scss">
#personal_curriculum {
  height: 100%;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  // margin-bottom: 0.2rem;
  .info_title {
    overflow: hidden;
    padding: 0.23rem 0.34rem 0.16rem;
    font-size: 0.2rem;
    color: #333333;
    .classRoom {
      width: 0.24rem;
      height: 0.24rem;
      float: right;
      font-size: 0.18rem;
      cursor: pointer;
      background: url(../../assets/img/person/class.png) no-repeat center top /
        0.24rem 0.24rem;
    }
  }

  .noCurriculum {
    padding: 0.22rem 0.42rem;
    color: #333333;
    font-size: 0.16rem;
    text-align: center;
  }
  .line {
    width: 100%;
    height: 1px;
    background: #eeeeee;
  }
  .curriculum_info {
    padding: 0.22rem 0.42rem;
    color: #333333;
    font-size: 0.16rem;
    .starting_title {
      font-size: 0.18rem;
    }
    .starting_title1 {
      font-size: 0.18rem;
      margin-top: 0.5rem;
    }
    .starting_info {
      width: 100%;
      height: 1.6rem;
      .starting_curriculum {
        .info_name {
          float: left;
          .info_img {
            float: left;
            width: 2.76rem;
            height: 1.6rem;
            border-radius: 4px;
            background: url(../../assets/img/person/1.png) no-repeat center top /
              2.76rem 1.6rem;
            position: relative;
            .info_img_tag {
              position: absolute;
              top: 0;
              right: 0.1rem;
              width: 0.6rem;
              height: 0.25rem;
              text-align: center;
              color: #ffffff;
              background-color: #37a169;
            }
          }
          .curriculum_info {
            float: left;
            padding-left: 0.16rem;
            padding-top: 0.08rem;
            .curriculum_info_title {
              font-size: 0.24rem;
              color: #333333;
            }
            .curriculum_info_content {
              padding-top: 0.12rem;
              font-size: 0.16rem;
              color: #333333;
            }
            .curriculum_info_footer {
              padding-top: 0.4rem;
              font-size: 0.18rem;
              color: #333333;
            }
          }
        }
        .info_time {
          padding-top: 0.08rem;
          float: right;
          .info_time_title {
            color: #666666;
            text-align: right;
          }
          .info_time_starting {
            padding-top: 0.18rem;
            font-size: 0.24rem;
            color: #f86b1e;
            text-align: right;
          }
          .info_time_classBegin {
          }
          .info_time_footer {
            margin-top: 0.36rem;
            border-radius: 8px;
            padding-top: 0.08rem;
            width: 1.62rem;
            height: 0.4rem;
            background: #e4e4e4;
            color: #999999;
            text-align: center;

            cursor: pointer;
          }
          .info_time_footer_active {
            color: #ffffff;
            background: #37a169;
            margin-top: 0.36rem;
            border-radius: 8px;
            padding-top: 0.08rem;
            width: 1.62rem;
            height: 0.4rem;
            text-align: center;
            cursor: pointer;
          }
          .info_time_footer_active:hover {
            background: #319961;
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
    .line1 {
      width: 100%;
      height: 1px;
      margin-top: 0.16rem;
      background: #ededed;
    }
    .card_box {
      width: 100%;
      min-height: 2.8rem;
      overflow: hidden;
      .class_card {
        position: relative;
        height: 2.91rem;
        margin: 0.22rem 0 0 0.16rem;
        float: left;
        .card_img {
          width: 2.72rem;
          height: 1.52rem;
          border-radius: 4px;
          background: url(../../assets/img/person/2.png) no-repeat center top /
            2.72rem 1.52rem;
          position: relative;
          .info_img_tag {
            position: absolute;
            top: 0;
            right: 0.1rem;
            width: 0.6rem;
            height: 0.25rem;
            text-align: center;
            color: #ffffff;
            background-color: #37a169;
          }
        }
        .card_name {
          padding-top: 0.08rem;
          padding-left: 0.04rem;
        }
        .card_time {
          font-size: 0.14rem;
          padding-left: 0.04rem;
          color: #666666;
        }
        .card_btn {
          position: absolute;
          padding-top: 0.07rem;
          left: 0rem;
          bottom: 0rem;
          width: 2.72rem;
          height: 0.36rem;
          color: #ffffff;
          background: #37a169;
          text-align: center;
          border-radius: 8px;
          cursor: pointer;
        }
        .card_btn:hover {
          background: #319961;
          color: rgba(255, 255, 255, 0.8);
        }
      }
      .class_card:nth-child(3n + 1) {
        margin-left: 0rem;
      }
    }
  }
}
</style>